{% extends 'base.html' %}

{% block title %}电影列表 - 电影推荐系统{% endblock %}

{% block content %}
<h1 class="mb-4">电影列表</h1>

<div class="row mb-4">
    <div class="col-md-6">
        <form method="get" class="form-inline">
            <div class="input-group">
                {{ form.query }}
                <button type="submit" class="btn btn-primary">搜索</button>
                {% if form.query.value %}
                <a href="{% url 'movie_list' %}" class="btn btn-secondary">清除</a>
                {% endif %}
            </div>
        </form>
    </div>
    <div class="col-md-6">
        <div class="d-flex justify-content-end">
            <div class="dropdown me-2">
                <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="genreDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    {% if selected_genre %}{{ selected_genre }}{% else %}所有类型{% endif %}
                </button>
                <ul class="dropdown-menu" aria-labelledby="genreDropdown">
                    <li><a class="dropdown-item" href="{% url 'movie_list' %}?sort={{ sort_by }}">所有类型</a></li>
                    {% for genre in genres %}
                    <li><a class="dropdown-item" href="{% url 'movie_list' %}?genre={{ genre.name }}&sort={{ sort_by }}">{{ genre.name }}</a></li>
                    {% endfor %}
                </ul>
            </div>
            <div class="dropdown">
                <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="sortDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    排序方式
                </button>
                <ul class="dropdown-menu" aria-labelledby="sortDropdown">
                    <li><a class="dropdown-item {% if sort_by == 'title' %}active{% endif %}" href="{% url 'movie_list' %}?{% if selected_genre %}genre={{ selected_genre }}&{% endif %}sort=title">按名称</a></li>
                    <li><a class="dropdown-item {% if sort_by == 'year' %}active{% endif %}" href="{% url 'movie_list' %}?{% if selected_genre %}genre={{ selected_genre }}&{% endif %}sort=year">按年份</a></li>
                    <li><a class="dropdown-item {% if sort_by == 'rating' %}active{% endif %}" href="{% url 'movie_list' %}?{% if selected_genre %}genre={{ selected_genre }}&{% endif %}sort=rating">按评分</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="row">
    {% for movie in movies %}
    <div class="col-md-4 mb-4">
        <div class="card h-100">
            <img src="{{ movie.poster_url|default:'/static/images/default_poster.jpg' }}" class="card-img-top" alt="{{ movie.title }}" onerror="this.src='https://via.placeholder.com/300x450?text=暂无海报'">
            <div class="card-body">
                <h5 class="card-title">{{ movie.title }} ({{ movie.year }})</h5>
                <p class="card-text text-truncate">{{ movie.description }}</p>
                <div class="d-flex justify-content-between align-items-center">
                    <div class="badge bg-info">评分: {{ movie.average_rating|floatformat:1 }}/5</div>
                    <a href="{% url 'movie_detail' movie.id %}" class="btn btn-sm btn-outline-primary">查看详情</a>
                </div>
            </div>
            <div class="card-footer">
                <small class="text-muted">
                    {% for genre in movie.genres.all %}
                    <span class="badge bg-secondary">{{ genre.name }}</span>
                    {% endfor %}
                </small>
            </div>
        </div>
    </div>
    {% empty %}
    <div class="col-12">
        <div class="alert alert-info">
            没有找到符合条件的电影。
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %} 